<template>
  <page-layout>
    <a-row :gutter="[10, 10]">
      <!-- 中心区域 -->
      <a-col :span="24">
        <a-card>
          <div class="mb-20">
            <!-- 查询参数 -->
            <pro-query
              :searchParam="searchParam.param"
              @on-search="search"
              @on-reset="onReset"
            ></pro-query>
          </div>
          <!-- 列表 -->
          <pro-table
            ref="tableRef"
            :fetch="fetch"
            :operate="state.operate"
            :columns="columns"
            :param="state.param"
            :pagination="pagination"
          >
          </pro-table>
        </a-card>
      </a-col>
    </a-row>
    <a-modal
      v-if="state.modalVisible"
      v-model:visible="state.modalVisible"
      :title="state.modalTitle"
      cancelText="取消"
      width="50%"
      :maskClosable="true"
      okText="确认"
      @cancel="handleCancel"
      @ok="handleOk">
      <a-form :model="state.form" :labelCol="{ span: 4 }" :wrapperCol="{ span: 18}">
        <a-form-item :label="state.modalStatus" name="status">
          <a-select v-model:value="state.form.status" style="width: 100%">
            <a-select-option
              v-for="(item, index) in dictLists.data[state.dictCode]"
              :key="index"
              :value="item.value"
              >{{ item.label }}</a-select-option
            >
          </a-select>
        </a-form-item>
        <a-form-item label="备注" name="remark">
          <a-textarea
            :auto-size="{ minRows: 2, maxRows: 6 }"
            :placeholder="t('placeholder.pleaseEnter')"
            :maxlength="500"
            v-model:value="state.form.remark"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </page-layout>
</template>

<script>
import {
  signUpPage,
  upateCourSts, // 修改认证状态
  upateCreditSts, // 修改上课状态
  upateRegSts, // 修改转学分状态
} from "@/api/module/student/information-tracking";
import { reactive, ref, onMounted } from "vue";
import { useI18n } from "vue-i18n";
import dictEnum from "@/const/dict";
import { getDictByCodesReturnObj } from "@/tools/get-dict";
import { filterEmptyByObject } from "@/tools/common";
import { useRouter } from "vue-router";
import { message } from 'ant-design-vue';

export default {
  name: "information-tracking",
  setup() {
    const { t } = useI18n();
    const tableRef = ref();

    const router = useRouter();

    const columns = [
      {
        title: '学校名称',
        dataIndex: "schName",
        key: "schName",
        width: 130,
      },
      {
        title: '学校班级代码',
        dataIndex: "schShiftCode",
        key: "schShiftCode",
        width: 130,
        ellipsis: true,
      },
      {
        title: '学生姓名',
        dataIndex: "stuName",
        key: "stuName",
        width: 130,
        ellipsis: true,
      },
      {
        title: '课程名称',
        dataIndex: "courseName",
        key: "courseName",
        width: 130,
        ellipsis: true,
      },
      {
        title: '项目名称',
        dataIndex: "projectName",
        key: "projectName",
        width: 130,
      },
      {
        title: '项目对接人',
        dataIndex: "projectHead",
        key: "projectHead",
        width: 130,
      },
      {
        title: '学期名称',
        dataIndex: "semesterName",
        key: "semesterName",
        width: 130,
        ellipsis: true,
      },
      {
        title: '订单编号',
        dataIndex: "orderNo",
        key: "orderNo",
        width: 150,
      },
      {
        title: t('sendingTranscripts.label.paymentStatus'),
        dataIndex: "curStatus",
        key: "curStatus",
        width: 100,
        cellRender: (record, data) => {
          const item = dictLists.data[dictEnum.PAY_STATE]
            ? dictLists.data[dictEnum.PAY_STATE].find((v) => v.value == data)
            : {};
          return item ? item.label : "";
        },
      },
      {
        title: t('sendingTranscripts.label.authenticationStatus'),
        dataIndex: "courSts",
        key: "courSts",
        width: 100,
        cellRender: (record, data) => {
          const item = dictLists.data[dictEnum.COURSE_STATUS]
            ? dictLists.data[dictEnum.COURSE_STATUS].find(
                (v) => v.value == data
              )
            : {};
          return item ? item.label : "";
        },
      },
      {
        title: t('sendingTranscripts.label.classStatus'),
        dataIndex: "creditSts",
        key: "creditSts",
        width: 100,
        cellRender: (record, data) => {
          const item = dictLists.data[dictEnum.CLASS_STATUS]
            ? dictLists.data[dictEnum.CLASS_STATUS].find((v) => v.value == data)
            : {};
          return item ? item.label : "";
        },
      },
      {
        title: '成绩单寄送状态',
        dataIndex: "regSts",
        key: "regSts",
        width: 130,
        cellRender: (record, data) => {
          const item = dictLists.data[dictEnum.REPORT_SEND_STATUS]
            ? dictLists.data[dictEnum.REPORT_SEND_STATUS].find(
                (v) => v.value == data
              )
            : {};
          return item ? item.label : "";
        },
      },
      {
        title: t('sendingTranscripts.label.transferStatus'),
        dataIndex: "regSts",
        key: "regSts",
        width: 130,
        cellRender: (record, data) => {
          const item = dictLists.data[dictEnum.CREDIT_STATUS]
            ? dictLists.data[dictEnum.CREDIT_STATUS].find(
                (v) => v.value == data
              )
            : {};
          return item ? item.label : "";
        },
      },
    ];


    /// 数据来源 [模拟]
    const fetch = async (param) => {
      let response = await signUpPage(param);
      return {
        data: response.data.record.map(item => {
          return {
            ...item,
            stuName: item.stuBusp ? item.stuBusp.stuName : ''
          }
        }),
        total: response.data.total,
      };
    };

    const pagination = {
      pageNum: 1,
      pageSize: 10,
    };

    const state = reactive({
      selectedRowKeys: [],
      param: {},
      visibleSave: false,
      currentRow: {},
      /// 行操作
      operate: [
        {
          label: '更多操作',
          children: [
            {
              label: '修改认证状态',
              event: function (row) {
                openDialog(row, 'auth')
              },
            },
            {
              label: '修改课程状态',
              event: function (row) {
                openDialog(row, 'course')
              },
            },
            {
              label: '修改转学分状态',
              event: function (row) {
                openDialog(row, 'credit')
              },
            },
            // {
            //   label: '成绩单寄送状态',
            //   event: function (row) {
            //     openDialog(row, 'send')
            //   },
            // },
          ]
        },
      ],

      modalVisible: false,
      modalTitle: '',
      modalStatus: '',
      dictCode: dictEnum.CREDIT_STATUS,
      form: {
        status: '',
        remark: ''
      },
      modalType: ''
    });

    const searchParam = reactive({
      param: [],
    });

    const dictLists = reactive({
      data: {},
    });
    const openDialog = (row, type) => {
      switch (type) {
        case "auth":
          state.modalTitle = '修改认证状态'
          state.modalStatus = '认证状态'
          state.dictCode = dictEnum.COURSE_STATUS
        break;
        case "course": 
          state.modalTitle = '修改课程状态'
          state.modalStatus = '课程状态'
          state.dictCode = dictEnum.CLASS_STATUS
        break;
        case "credit":
          state.modalTitle = '修改转学分状态'
          state.modalStatus = '转学分状态' 
          state.dictCode = dictEnum.CREDIT_STATUS
        break;
        case "send":
          state.modalTitle = '修改成绩单寄送状态'
          state.modalStatus = '成绩单寄送状态' 
          state.dictCode = dictEnum.REPORT_SEND_STATUS
        break;
      }
      state.form = {
        id: row.id,
        status: '',
        remark: ''
      }
      state.modalType = type
      state.currentRow = row
      state.modalVisible = true
    }
    const search = function (value) {
      state.param = {
        ...state.param,
        ...filterEmptyByObject(value),
      };
    };
    const onReset = function () {
      state.param = {};
      pagination.pageNum = 1
    };

    const onSelectChange = (selectedRowKeys) => {
      state.selectedRowKeys = selectedRowKeys;
    };
    const handleOk = async () => {
      let api = null
      switch (state.modalType) {
        case "auth":
          api = upateCourSts
        break;
        case "course": 
          api = upateCreditSts
        break;
        case "credit":
          api = upateRegSts
        break;
        case "send":
          api = null
        break;
      }

      const response = await api(state.form)
      let { code } =  response
      if (code == 500) return message.warning('修改失败')
      if (code == 200) message.success('修改成功')
      state.modalVisible = false
      state.modalTitle = ''
      state.modalStatus = ''
      state.currentRow = {}
      tableRef.value.reload()
    }
    const handleCancel = () => {
      state.modalVisible = false
      state.modalTitle = ''
      state.modalStatus = ''
      state.currentRow = {}
    }
    onMounted(async () => {
      dictLists.data = await getDictByCodesReturnObj([
        dictEnum.CLASS_STATUS, // 课程状态
        dictEnum.COURSE_STATUS, // 课程认证状态
        dictEnum.CREDIT_STATUS, // 学分认证状态
        dictEnum.PAY_STATE, // 订单支付状态
        dictEnum.TRANSFER_POLICY, // 转学分状态
        dictEnum.REPORT_SEND_STATUS, // 成绩单寄送状态
      ]);
      searchParam.param = [
        {
          key: "school",
          type: "input",
          label: t('sendingTranscripts.label.university'),
          placeholder: t('placeholder.pleaseEnter'),
        },
        {
          key: "semester",
          type: "input",
          label: t('sendingTranscripts.label.semester'),
          placeholder: t('placeholder.pleaseEnter'),
        },
        {
          key: "cozName",
          type: "input",
          label: t('sendingTranscripts.label.curriculum'),
          placeholder: t('placeholder.pleaseEnter'),
        },
        {
          key: "proHead",
          type: "input",
          hidden: true,
          label: '项目对接人',
          placeholder: t('placeholder.pleaseEnter'),
        },
        {
          key: "courSts",
          type: "select",
          options: dictLists.data[dictEnum.COURSE_STATUS],
          label: t('sendingTranscripts.label.authenticationStatus'),
          hidden: true,
          placeholder: t('placeholder.pleaseSelect'),
        },
        {
          key: "creditSts",
          type: "select",
          options: dictLists.data[dictEnum.CLASS_STATUS],
          label: t('sendingTranscripts.label.classStatus'),
          hidden: true,
          placeholder: t('placeholder.pleaseSelect'),
        },
        {
          key: "regSts",
          type: "select",
          options: dictLists.data[dictEnum.CREDIT_STATUS],
          label: t('sendingTranscripts.label.transferStatus'),
          hidden: true,
          placeholder: t('placeholder.pleaseSelect'),
        },
      ];
    });
    return {
      t,
      state,
      fetch,
      search,
      onReset,
      columns,
      pagination,
      searchParam,
      onSelectChange,
      tableRef,
      dictEnum,
      dictLists,
      handleCancel,
      handleOk,
    };
  },
};
</script>
